<script setup>
import {ref, provide, onBeforeMount, watchEffect} from 'vue'
import AddAuthority from "@/views/index/manager/components/AddAuthority.vue";
import UpdateAuthority from "@/views/index/manager/components/UpdateAuthority.vue";
import {delAllowMailAPI, getAllowMailsPageAPI} from "@/api/manager.js";
import {CANCEL, getOrderStatusMsg, WAIT_PAY} from "@/constants/OrderStatus.js";
import {getManagerRole, ROOT} from "@/constants/ManagerRole.js";
import AddAllowMail from "@/views/index/manager/components/AddAllowMail.vue";
import UpdateAllowMail from "@/views/index/manager/components/UpdateAllowMail.vue";

// 下拉选择选项
const selectOptions = [
  {label: '全部', value: ''},
  {label: '禁用', value: true},
  {label: '开放', value: false},
]
// 下拉选择
const selectValue = ref(null)

// 匹配条件
const mailMatch = ref(null)
watchEffect(() => {
  if (mailMatch.value === '') mailMatch.value = null
})

// 分页数据
const current = ref(1)
const pageSize = ref(10)
const pageCnt = ref(0)
const size = ref(0)
const data = ref([])
const getAllowMailsPage = async (current_, pageSize_, disabled_ = null, mailMatch_ = null) => {
  const res = await getAllowMailsPageAPI(current_, pageSize_, disabled_, mailMatch_)
  if (res === null) return
  current.value = res.current
  pageSize.value = res.pageSize
  pageCnt.value = res.pageCnt
  size.value = res.size
  data.value = res.data
}

// 初始查询
onBeforeMount(async () => {
  await getAllowMailsPage(current.value, pageSize.value)
})

// 条件查询
const searchByCondition = async () => {
  await getAllowMailsPage(current.value, pageSize.value, selectValue.value, mailMatch.value)
}

// 新增权限是否显示
const addAllowMailVisible = ref(false)
// 显示
const showAllowMaility = () => {
  addAllowMailVisible.value = true
}
// 传递给子组件
provide('addAllowMailVisible', {
  addAllowMailVisible,
  searchByCondition
})

// 修改是否显示
const updateAllowMailVisible = ref(false)
// 传递给子组件的数据
const updateAllowMailData = ref({})
// 显示
const showUpdateAllowMail = (idx) => {
  console.log(data.value[idx])
  updateAllowMailVisible.value = true
  updateAllowMailData.value = data.value[idx]
}
// 传递给子组件
provide('updateAllowMail', {
  updateAllowMailVisible,
  updateAllowMailData,
  searchByCondition
})

// 分页每页数据大小改变
const handlePageSizeChange = async (val) => {
  pageSize.value = val
  await searchByCondition()
}
// 当前页发生变化
const handleCurrentChange = async (val) => {
  current.value = val
  await searchByCondition()
}

// 为表格的禁用行添加禁用类名
const tableRowClassName = ({row: auth}) => {
  if (auth.disabled === true) return 'disabled-row'
  return ''
}

// 删除
const delAllowMail = async (idx) => {
  const allowMail = data.value[idx]
  const res = await ElMessageBox.confirm(
      `是否确认删除管理员邮箱：${allowMail.mail}`,
      '管理员邮箱删除',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    // 执行权限删除
    return await delAllowMailAPI(allowMail.id)
  }).catch(() => {
    return false
  })
  // 成功
  if (res) await searchByCondition()
}
</script>

<template>
  <div class="allow-mails w-full min-w-max flex justify-center items-start">
    <div class="glass-container p-8">
      <div class="flex justify-between items-center">
        <div class="flex-1 flex justify-start items-center">
          <el-select v-model="selectValue" class="select w-28" placeholder="是否禁用">
            <el-option
                v-for="item in selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
          <div>
            <el-input class="ipt" v-model="mailMatch" clearable :maxlength="255"
                      show-word-limit placeholder="请输入查询邮箱"/>
          </div>
          <el-button type="primary" plain @click="searchByCondition">搜索</el-button>
        </div>
        <el-button type="primary" plain @click="showAllowMaility">新增邮箱</el-button>
      </div>
      <el-table class="mt-4" style="width: 100%" :data="data" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="编号" width="80"/>
        <el-table-column prop="mail" label="邮箱" width="255"/>
        <el-table-column prop="role" label="角色" width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.role === ROOT" effect="dark">{{ getManagerRole(scope.row.role) }}</el-tag>
            <el-tag v-else>{{ getManagerRole(scope.row.role) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="disabled" label="是否禁用" width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.disabled === false" type="success">开放</el-tag>
            <el-tag v-else-if="scope.row.disabled === true" type="info">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button :disabled="scope.row.role === ROOT" type="info" plain size="small" @click="showUpdateAllowMail(scope.$index)">修改</el-button>
            <el-button :disabled="scope.row.role === ROOT" type="danger" plain size="small" @click="delAllowMail(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-4 flex justify-end items-center">
        <el-pagination
            v-model:current-page="current"
            v-model:page-size="pageSize"
            :page-sizes="[1, 10, 20, 30, 40]"
            :total="pageCnt"
            layout="sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <AddAllowMail></AddAllowMail>
  <UpdateAllowMail></UpdateAllowMail>
</template>

<style lang="scss">
// 表格禁用行样式
.el-table .disabled-row {
  --el-table-tr-bg-color: #f4f4f5;
  --el-table-row-hover-bg-color: #f4f4f5;
  color: #cbcccf;
}
</style>